<!-- 发起人节点信息修改页 -->
<template>
    <Drawer title="发起人节点配置" v-model="localShowConfig" width="700" @on-visible-change="changeVisible" :mask-closable="false"
        scrollable>
        <div class="condition_item">
            <Space>
                发起人：
                <Select v-model="formData.id" clearable placeholder="发起人" style="width: 200px;">
                    <Option v-for="item in userList" :value="item.id">{{ item.userName }}</Option>
                </Select>
            </Space>
        </div>
        <div class="demo-drawer-footer">
            <Button type="primary" @click="save">保存</Button>
        </div>
    </Drawer>
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
    showConfig: {
        type: Boolean,
        default: false
    },
    data: {
        type: Object
    }
});

const localShowConfig = ref(props.showConfig);

const emit = defineEmits(['changeVisible', 'update:showConfig']);

const formData = ref({
    id: props.data ? props.data.id : '', // 发起人
});

watch(() => props.data, (newValue) => {
    formData.value = newValue ? newValue : {id: ''};
});

// 用户列表
const userList = ref([
    { userName: '张三', id: '1' },
    { userName: '李四', id: '2' },
    { userName: '王五', id: '3' }
]);

/**
 *  查找用户
 * @param id 用户id
 * @returns 用户对象
 * */
const findUser = (id) => {
    let index = userList.value.findIndex(item => item.id == id);
    return userList.value[index];
}

// 保存
const save = () => {
    emit('changeVisible', findUser(formData.value.id));
}

// 修改状态提交关闭
const changeVisible = (val) => {
    emit('update:showConfig', val);
}

</script>

<style scoped lang="scss">
.condition_item {
    margin-bottom: 15px;
}

.demo-drawer-footer {
    width: 700px;
    position: fixed;
    bottom: 0;
    right: 0;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    background: #fff;
}
:deep(.ivu-table-wrapper) {
    overflow: unset;
}
:deep(.ivu-table) {
    overflow: unset;
}
</style>